<template>
  <div :class="className" :style="{height:height,width:width}" />

</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  export default {
    // mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart',

      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '100%'
      },
      bingzhuang:{
        type: Array,
      },
    },

    data() {
      return {
        chart: null,
        option: {},
        zhidata:[
          {
            value: 335,
            name: '直接访问'
          },
          {
            value: 310,
            name: '邮件营销'
          },
          {
            value: 234,
            name: '联盟广告'
          },
          {
            value: 135,
            name: '视频广告'
          },
          {
            value: 1548,
            name: '搜索引擎'
          }

        ]

      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })

    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    watch:{
      bingzhuang(curVal,oldVal){

        if(curVal){
          console.log('监听饼状图',this.bingzhuang)
          this.xuanran()
          this.initChart()
          // this.$forceUpdate();
        }
      },
    },
    created() {
      this.xuanran()
      this.initChart()
    },
    methods: {
      xuanran(){

        var that =this
        var arr=[]
        for (var i=0;i<that.bingzhuang.length;i++){
          arr.push({
            value:that.bingzhuang[i].totalSun,
            name:that.bingzhuang[i].depName
          })
        }
        console.log('饼状图222222222',arr)
        this.zhidata = arr
        this.option = {
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            data: [''],
            textStyle: {
              fontSize: '14',
              color:'#10fcf3'
            }
          },
          series: [{

            name: '所属战线',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center',
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '18',
                  fontWeight: 'bold'
                },
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data:this.zhidata
          }]
        };
      },
      initChart() {
        var that = this
        that.chart = echarts.init(this.$el, 'macarons')
        that.chart.setOption(that.option)
      },

    }
  }
</script>
